<template>
	<view>
		<view class="charts-column flex" :style="{height:columnHeight+'rpx'}">
			<view class="charts-item f-y-ad">
				<view class="f-c-s">
					<view>{{data.money}}</view>
					<view class="left-title" style="border-color: #E86496;">营业总额<view class="after" style="background-color: #E86496;"/></view>
				</view>
				<view class="f-c-s" v-if="type != 3">
					<view>{{data.subsidy}}</view>
					<view class="left-title" style="border-color: #F2B236;">平台补贴<view class="after" style="background-color: #F2B236;"/></view>
				</view>
				<view class="f-c-s">
					<view>{{data.income}}</view>
					<view class="left-title" style="border-color: #EE695F;">预计收入<view class="after" style="background-color: #EE695F;"/></view>
				</view>
			</view>
			<view class="charts-item">
				<!-- 营业总额 -->
				<view class="column" :style="{height:(columnInfo.goodsHeight || 0) + 'rpx'}" style="background-color:#E86496 ;z-index: 3;"></view>
				<!-- 配送费 -->
				<!-- <view class="column" :style="{height:(columnInfo.boxMoneyHeight || 0) + 'rpx'}"  style="background-color:#F2B236 ;z-index: 2;"></view> -->
				<!-- 包装费 -->
				<!-- <view class="column" :style="{height:(columnInfo.deliveryHeight || 0) + 'rpx'}" style="background-color:#EE695F ;z-index: 1;"></view> -->
			</view>
			<view class="charts-item">
				<!-- 平台服务费 -->
				<view class="column" :style="{height:(columnInfo.serverHeight || 0) + 'rpx'}" style="background-color:#6BCF79 ;z-index: 3;"></view>
			</view>
			<view class="charts-item f-y-ad">
				<view class="f-c-e">
					<view class="t-r"><text v-if="data.service">-</text>{{data.service}}</view>
					<view class="right-title" style="border-color: #6BCF79;">平台服务费<view class="before" style="background-color: #6BCF79;"/></view>
				</view>
			</view>
		</view>
		<view class="f-c" style="border-top:1px solid #CDCDCD;">
			<text class="t-r charts-item">营业额</text>
			<text style="width: 100rpx;height: 1px;"></text>
			<text class="t-l charts-item">支出</text>
		</view>
	</view>
</template>

<script>
	
	export default {
		props: {
			data: {
				type: Object,
				default: function() {
					return {}
				}
			},
			type:{
				type: [String,Number],
				default: ''
			},
			columnHeight:{
				type:[Number,String],
				default:500
			}
		},
		data(){
			return{
				// result:{
				// 	all:0,
				// 	subsidy:0,
				// 	income:0
					
				// }
			}
		},
		// watch:{
		// 	data:{
		// 		handler(val){
		// 			if(this.type == 1){
		// 				this.result.all = val.allMoney
		// 				this.result.subsidy = val.subsidy
		// 				this.result.income = val.income
		// 			}else if(this.type == 2){
						
		// 			}
		// 		},
		// 		deep:true
		// 	}
		// }
		computed:{
			columnInfo(){
				var serverHeight = (this.data.service/this.data.money) * this.columnHeight
				var goodsHeight = (this.data.money/this.data.money) * this.columnHeight
				return {
					serverHeight,goodsHeight
				}
			}
		},
		data() {
			return {}
		}
	}
</script>

<style scoped lang="scss">
	.charts-column{
		width: 690rpx;
		background-color: #FFFFFF;
	}
	.column{
		position: absolute;
		width: 120rpx;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.charts-item{
		position: relative;
		width: 170rpx;
	}
	.left-title{
		position: relative;
		border-top: 1px solid;
	}
	.left-title .after{
		position: absolute;
		width: 14rpx;
		height: 14rpx;
		top: -7rpx;
		right: 0;
		border-radius: 50%;
	}
	.right-title{
		position: relative;
		border-top: 1px solid;
	}
	.right-title .before{
		position: absolute;
		width: 14rpx;
		height: 14rpx;
		top: -7rpx;
		left: 0;
		border-radius: 50%;
	}
</style>
